<template>
  <el-scrollbar :native="false" tag="section" class="el-scroll">
    <el-menu
      :default-active="defaultActive"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
    >
      <my-el-submenu
        v-for="item in datas"
        :datas="item"
        :key="item.id"
      >
      </my-el-submenu>
    </el-menu>
  </el-scrollbar>
</template>
<script type="text/ecmascript-6">
  import myElSubmenu from './MyElSubmenu';

  export default {
    name: 'MyElMenu',
    components: {myElSubmenu},
    props: {
      defaultActive: {
        type: String,
        default: ''
      },
      isCollapse: {
        type: Boolean,
        default: false
      },
      datas: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {};
    },
    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
        this.$emit('handleOpen', key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
        this.$emit('handleClose', key, keyPath);
      },
      handleSelect(key, keyPath) {
        this.$emit('handleSelect', key, keyPath);
      }
    },
    computed: {},
    mounted() {
    },
    destroyed() {
    }
  };
</script>
<style lang="less">
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 2rem;
    min-height: 4rem;
  }

  .el-scroll .el-menu {
    border-right: 0.01rem solid #1a243e;
  }
</style>
